<template>
  <el-container class="app-container" :class="{ 'qiankun-microapp': isQiankun }">
    <el-header class="header">
      <div class="logo-container">
        <span class="logo-text">DevOps 数据分析平台</span>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="main-menu"
        mode="horizontal"
        @select="handleMenuSelect"
      >
        <el-menu-item index="test-api">
          <el-icon><Document /></el-icon>
          <span>API测试</span>
        </el-menu-item>
        <el-menu-item index="website-tracking">
          <el-icon><Connection /></el-icon>
          <span>网站跟踪</span>
        </el-menu-item>
        <el-menu-item index="settings">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main class="main-content">
      <router-view v-if="!isLoading" />
      <div v-else class="loading-container">
        <el-loading-spinner />
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Document, Connection, Setting } from '@element-plus/icons-vue';
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import { useAuthStore } from './store/auth';

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();

// 检测是否在 qiankun 环境中
const isQiankun = computed(() => qiankunWindow.__POWERED_BY_QIANKUN__);

const isLoading = computed(() => authStore.isLoading);
const activeMenu = computed(() => {
  // 在 qiankun 环境下，路径可能是 /vue-devops/website-tracking，需要正确解析
  const pathSegments = route.path.split('/').filter(Boolean);
  // 如果在 qiankun 环境下，第一个段是 'vue-devops'，需要取第二个段
  const relevantPath = pathSegments[pathSegments.length - 1] || 'website-tracking';
  return relevantPath === 'website-tracking' ? 'website-tracking' : 
         relevantPath === 'settings' ? 'settings' : 
         relevantPath === 'test-api' ? 'test-api' : 'website-tracking';
});

const handleMenuSelect = (key: string) => {
  // 使用相对路径，路由会自动处理基础路径
  router.push(`/${key}`);
};

// 初始化时检查token
onMounted(async () => {
  if (!authStore.isAuthenticated && !authStore.isLoading) {
    await authStore.initialize();
  }
});
</script>

<style scoped>
/* 使用CSS变量支持主题切换 */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-color, var(--el-bg-color-page, #f0f2f5));
}

/* 微应用环境下的样式 */
.qiankun-microapp {
  min-height: auto !important;
  height: 100% !important;
  width: 100%;
  padding: 0;
  background-color: transparent;
  overflow: hidden;
}

.qiankun-microapp :deep(.el-container) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: var(--el-bg-color, #fff);
  border-bottom: 1px solid var(--border-color, var(--el-border-color-light, #e8e8e8));
  height: 64px;
  flex-shrink: 0;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 64px;
  margin-right: 24px;
}

.logo-text {
  color: var(--text-color, var(--el-text-color-primary, #333));
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.main-menu {
  flex: 1;
  background-color: transparent;
  border-bottom: none;
}

.main-content {
  flex: 1;
  padding: 24px;
  background-color: var(--background-color, var(--el-bg-color-page, #f0f2f5));
  overflow-y: auto;
  overflow-x: hidden;
}

/* 微应用环境下移除滚动，由外层容器控制 */
.qiankun-microapp .main-content {
  overflow: visible !important;
  height: auto;
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.qiankun-microapp :deep(.el-main) {
  overflow: visible !important;
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

/* 暗色模式适配 */
html.dark .header {
  background-color: var(--el-bg-color, #1f1f1f);
  border-bottom-color: var(--el-border-color, #404040);
}

html.dark .logo-text {
  color: var(--el-text-color-primary, #fff);
}
</style>
